
<template>
  <div>
      <div class="form_wrap">
        <div class="search">
          <el-input v-model="seatext"></el-input>
          <el-button @click="search" type="primary">查询</el-button>
        </div>
          <el-button type="success" @click="openDia">添加</el-button>
      </div>
      <teleport to='#adminModel' >
        <el-dialog
                v-model="$store.state.adminDia"
                :title="diaTitle"
                width="50%"
                :before-close="handleClose"
                  :size="formSize"
              >
              <el-form
                ref="ruleFormRef"
                :rules="rules"
                :model="ruleForm"
                >
                <el-form-item label="用户名:" prop="userName">
                  <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="姓名:" prop="turename">
                  <el-input v-model="ruleForm.turename"></el-input>
                </el-form-item>
                <el-form-item label="手机:" prop="phone">
                  <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="手机:">
                    <el-select v-model="ruleForm.power">
                      <el-option label="系统管理员" value="1"></el-option>  
                      <el-option label="课程管理员" value="2"></el-option>  
                    </el-select> 
                </el-form-item>
              </el-form>

                <template #footer>
                  <span class="dialog-footer">
                    <el-button type="success" @click="submit(ruleFormRef)">{{diaBtn}}</el-button>
                    <el-button type="primary" @click="handleClose"
                      >取消</el-button
                    >
                  </span>
                </template>
              </el-dialog>
      </teleport>
  </div>
</template>
<script lang="ts">
import { reactive, watch,ref,toRefs, defineComponent } from 'vue';
import { ElForm,ElMessage } from 'element-plus';
import {useStore} from 'vuex'
import {addAdmin,editAdmin} from '../../api/admin'
import $bus from '../../utils/bus'
export default defineComponent({
    emits:{
      'resetlist':null, //子传夫要触发的事件
      'sendsearch':null,
       'open': (value) => {
          if (typeof value === "string") {
            return true;
          } else {
            return false;
          }
        }
    },
    setup(props,context){
        // 获取一个ElForm的类型的数据
        type FormInstance = InstanceType<typeof ElForm>
        // 创建一个表单类型的数据
        const formSize = ref('')
        const ruleFormRef = ref<FormInstance>()
        console.log(ruleFormRef)
        let store=useStore();
   
        let datas=reactive({
           diaTitle:"添加管理员",
           diaBtn:"添加",
            seatext:"",//搜索字段
            ruleForm:{  //v-model的数据
               userName:"",
               phone:"",
               power:"",
               turename:"",
               tokenId:"",
               password: "123456",
            },
            rules:{ //表单的规则
              userName:{required:true,message:"必须输入用户名",trigger:'blur'},
              phone:{pattern:/^1[3-9]\d{9}$/,message:"手机号不符合规则",trigger:'blur'},
              turename:{required:true,message:"必须输入真实姓名",trigger:'blur'},
            },
            submit(formEl:FormInstance|undefined){ //表单的提交事件
                if(!formEl) return;
                formEl.validate(async (valid)=>{
                      if(valid){
                          console.log("通过")
                      console.log(datas.ruleForm.tokenId)
                     if(datas.ruleForm.tokenId){
                          // 修改管理员 
                          var editRes:any=await editAdmin(datas.ruleForm);
                          if(editRes.success){
                            ElMessage.success("修改管理员成功")
                          }
                      }else{
                        // 调用添加管理员接口
                          var res:any=await addAdmin(datas.ruleForm)
                          console.log(res)
                          if(res.success){
                            ElMessage.success("添加管理员成功")
                          }
                      }
                            datas.diaTitle="添加管理员";
                            datas.diaBtn="添加";

                            // formEl.resetFields();//清空表单
                             datas.ruleForm={  //清空表单
                                    userName:"",
                                    phone:"",
                                    power:"",
                                    turename:"",
                                    tokenId:"",
                                    password: "123456",
                            }
                            // 关闭弹出层
                            store.commit("changeAdminDia",false)
                            // 触发父组件的事件
                            console.log(context)
                            context.emit("open",1122)
                            context.emit("resetlist")
                      }else{
                        console.log("未通过")
                      }
                })
            },
            handleClose(){//关闭弹出层
               store.commit("changeAdminDia",false)
            },
            openDia(){//打开弹出层
              store.commit("changeAdminDia",true)
            },
            search(){ //搜索方法  触发父组件的事件 并传递搜索框中的值
              context.emit("sendsearch",datas.seatext)
              datas.seatext=""
            }
        })
          // 监控输入框的变化
          // watch(()=>datas.seatext,(newval)=>{
          //       console.log(newval)
          // })
        let mydata=toRefs(datas)
     // 接受表格组件的点击编辑传来的当前行数据
      $bus.on("sendrow",(row:any)=>{
            datas.ruleForm.userName=row.userName;
            datas.ruleForm.turename=row.turename;
            datas.ruleForm.phone=row.phone;
            // 存储修改id
            datas.ruleForm.tokenId=row.tokenId;
            datas.ruleForm.power=row.power;
            datas.diaTitle="修改管理员";
            datas.diaBtn="确认修改";
      })
        return {
            ...mydata,
            ruleFormRef,
            formSize
        }
    } 
})
</script>
<style lang="less">
  .form_wrap{
    display: flex;
    justify-content: space-between;
    background: #ccc;
    padding: 0 40px;
    box-sizing: border-box;
    margin: 20px auto;
    .search{
      display: flex;
    }
  }
</style>